<template>
  <div class="page">
    <div class="main">
      <div class="logo"></div>
      <div class="intro">
        <div class="intro-title">DSP广告交易平台</div>
        <div class="intro-desc">程序化对接优质媒体，高效实现营销目标，为您的广告营销保驾护航</div>
      </div>
    </div>
    <div class="aside">
      <div class="login">
        <div class="login-title">登录中心</div>
        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
        >
          <el-form-item prop="username">
            <el-input
              type="input"
              placeholder="请输入账号"
              v-model.trim="loginForm.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              placeholder="请输入密码"
              @keydown.enter="login"
              v-model.trim="loginForm.password"
              autocomplete="new-password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="loginForm.remember">记住账号</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="login"
              class="u-wb100"
              type="primary"
            >登 录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { fetchLogin } from "@/api";
import { localStorage, sessionStorage, getHome } from "@/utils";
export default {
  data() {
    return {
      loginForm: {
        username: localStorage.get("USER_NAME") || "",
        password: "",
        remember: !!localStorage.get("USER_NAME")
      },
      loginRules: {
        username: {
          required: true,
          trigger: ["blur", "change"],
          message: "请输入账号"
        },
        password: {
          required: true,
          trigger: ["blur", "change"],
          message: "请输入密码"
        }
      }
    };
  },
  methods: {
    ...mapMutations(["SET_DYNAMIC_ROUTES"]),

    // 记住账号
    handleRemember() {
      if (this.loginForm.remember) {
        localStorage.set("USER_NAME", this.loginForm.username);
      } else {
        localStorage.remove("USER_NAME");
      }
    },
    // 登录
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          fetchLogin({
            body: {
              username: this.loginForm.username,
              password: this.loginForm.password
            }
          }).then(res => {
            let user = res.data;
            // 没有权限
            if (!user.permission.length) {
              return this.$message.error("账号未分配权限，请联系管理员！");
            }
            // 管理员账户、或者账户状态是启用的
            else if (user.userType === 2 || user.accountStatus === "启用") {
              sessionStorage.set("USER", user);
              // 添加路由
              this.SET_DYNAMIC_ROUTES(this.$router);
              // 动态跳转首页
              let home = getHome();
              if (home) {
                this.handleRemember();
                this.$router.push({
                  name: home
                });
              } else {
                this.$message.error("未分配首页模块权限，请联系管理员！");
              }
            }
            // 广告主账户：资质待提交、审核拒绝
            else if (user.userType === 1) {
              let isApproveAccount = [
                "资质待提交",
                "审核拒绝",
                "审核中"
              ].includes(user.accountStatus);
              if (isApproveAccount) {
                sessionStorage.set("USER", {
                  ...user,
                  permission: []
                });
                let action = "detail";
                if (user.accountStatus === "资质待提交") {
                  action = "wait";
                } else if (user.accountStatus === "审核拒绝") {
                  action = "refuse";
                } else if (user.accountStatus === "审核中") {
                  action = "audit";
                }
                // 添加路由
                this.SET_DYNAMIC_ROUTES(this.$router);
                this.handleRemember();
                this.$router.replace({
                  name: "account-advertiser-aptitude",
                  query: {
                    action,
                    userId: user.userId,
                    userType: user.userType
                  }
                });
              }
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.page,
.main,
.aside {
  height: 100%;
}
.page {
  position: relative;
}
.main {
  margin-right: 38%;
  background: #0c1325 url(../assets/img/login-bg.jpg) right center no-repeat;
  background-size: cover;
}
.aside {
  width: 38%;
  position: absolute;
  top: 0;
  right: 0;
  background: #fff;
}
.logo {
  position: absolute;
  top: 30px;
  left: 50px;
  width: 156px;
  height: 60px;
  background: url(../assets/img/logo.png) 0 0 no-repeat;
}
.intro {
  position: absolute;
  top: 50%;
  left: 10%;
  margin-top: -100px;
  &-title {
    position: relative;
    font-size: 42px;
    line-height: 42px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 20px;
  }
  &-desc {
    font-size: 16px;
    color: #fafafa;
    opacity: 0.7;
  }
}
.login {
  position: absolute;
  top: 50%;
  left: 90px;
  right: 90px;
  margin-top: -154px;
  &-title {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 40px;
    position: relative;
    &::after {
      content: " ";
      position: absolute;
      width: 64px;
      height: 2px;
      left: 0;
      bottom: -8px;
      background-image: linear-gradient(-90deg, #c3dce5 0, #04c1fe 100%);
    }
  }
}
</style>